<template>
	<div class="app-container">
		<div class="wx-user-box">
			<div class="wx-user-title">退款申请列表</div>
			<div class="search-box">
				<!-- 查询 -->
				<el-form :inline="true" :model="form" label-width="80px">
					<el-form-item label="订单号">
						<el-input v-model="form.order_id" placeholder="请输入订单号" clearable @change="sousuo()"
							style="width: 260px;"></el-input>
					</el-form-item>
					<el-form-item label="站点名称">
						<el-select v-model="form.site_id" placeholder="请选择" style="width: 260px;" clearable
							@change="sousuo()">
							<el-option :label="item.site_name" :value="item.site_id" v-for="(item, index) in sites"
								:key="index"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="设备号">
						<el-input v-model="form.device_id" placeholder="请输入设备号" clearable @change="sousuo()"
							style="width: 260px;"></el-input>
					</el-form-item>
					<el-form-item label="充电状态">
						<el-select v-model="form.charging_state" placeholder="可选择状态" style="width: 260px;" clearable
							@change="sousuo()">
							<el-option :label="item.label" :value="item.value" v-for="(item, index) in stateList"
								:key="index"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="用户账号">
						<el-input v-model="form.user_tel" placeholder="请输入用户账号" clearable @change="sousuo()"
							style="width: 260px;"></el-input>
					</el-form-item>
					<el-form-item label="充电时间">
						<el-date-picker style="width: 260px;" v-model="form.recharge_start_end" type="daterange"
							value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
							@change="sousuo()"></el-date-picker>
					</el-form-item>
					<el-form-item label="支付时间">
						<el-date-picker style="width: 260px;" v-model="form.pay_start_end" type="daterange"
							value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
							@change="sousuo()"></el-date-picker>
					</el-form-item>
					<el-form-item label=""><el-button type="primary" @click="sousuo()"
							icon="el-icon-search">查询</el-button></el-form-item>
					<!-- <el-form-item><el-button type="warning" @click="getDataExcel" icon="el-icon-download">订单导出</el-button></el-form-item> -->
				</el-form>

				<el-table border :data="list" style="width: 100%">
					<el-table-column prop="id" label="订单号" width="180" align="center"></el-table-column>
					<el-table-column prop="site_name" label="站点名称" width="150" align="center"></el-table-column>
					<el-table-column prop="device_id" label="设备号" width="120" align="center"></el-table-column>
					<el-table-column prop="device_name" label="设备名称" width="130" align="center"></el-table-column>
					<el-table-column label="充电状态" width="100" align="center">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.charging_state == 0" type="info">未充电</el-tag>
							<el-tag v-else-if="scope.row.charging_state == 1" type="success">充电中</el-tag>
							<el-tag v-else-if="scope.row.charging_state == 2">订单完成</el-tag>
							<el-tag v-else-if="scope.row.charging_state == 3" type="danger">通电失败</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="t_name" label="收费模板" width="100" align="center"></el-table-column>
					<el-table-column prop="s_name" label="分账模板" width="100" align="center"></el-table-column>
					<el-table-column prop="expect_money" label="订单金额" width="100" align="center"></el-table-column>
					<!-- <el-table-column prop="refund_amount" label="未达时间退款" width="120" align="center"></el-table-column> -->
					<el-table-column prop="charging_money" label="支付金额" width="100" align="center"></el-table-column>
					<el-table-column prop="payment_method" label="付款方式" width="100" align="center">
						<template slot-scope="scope">
							微信
						</template>
					</el-table-column>
					<el-table-column label="订单状态" width="100" align="center">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.pay_state == 1" type="info">未支付</el-tag>
							<el-tag v-else-if="scope.row.pay_state == 2" type="success">已支付</el-tag>
							<el-tag v-else-if="scope.row.pay_state == 3" type="warning">已退款</el-tag>
							<el-tag v-else-if="scope.row.pay_state == 4" type="danger">取消通电</el-tag>
							<el-tag v-else-if="scope.row.pay_state == 5" type="danger">待退款</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="user_tel" label="用户账号" width="130" align="center"></el-table-column>
					<el-table-column prop="start_time" label="开始时间" width="160" align="center"></el-table-column>
					<el-table-column prop="end_time" label="结束时间" width="160" align="center"></el-table-column>
					<el-table-column prop="pay_time" label="支付时间" width="160" align="center"></el-table-column>
					<el-table-column prop="stop_charging_mode" label="停充方式" width="160" align="center"></el-table-column>
					<el-table-column label="操作" width="160" fixed="right">
						<template slot-scope="scope">
							<el-button size="mini" plain @click="getOrderInfo(scope.row.id)">详情</el-button>
							<el-button v-if="scope.row.pay_state == 2" size="mini" type="danger" plain
								@click="itemForm = scope.row, dialogVisible2 = true">退款</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 分页 -->
			<div class="wx-user-pagination-div">
				<el-pagination background :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total" :pager-count="pageCount" prev-text="上一页"
					next-text="下一页" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</div>
		</div>

		<!-- 申请退款 -->
		<el-dialog title="是否对该账单进行退款操作" width="500px" :visible.sync="dialogVisible2" @close="refund_reason = ''">
			<el-form ref="form2" :model="form" label-width="80px">
				<el-form-item label="退款金额">
					<el-input :disabled="true" v-model="itemForm.charging_money" />
				</el-form-item>
				<el-form-item label="退款原因">
					<el-input type="textarea" v-model="refund_reason" placeholder="请输入退款原因" clearable />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<div class="flex-center">
					<el-button @click="dialogVisible2 = false, refund_reason = ''">取 消</el-button>
					<el-button type="primary" @click="toRefund">确 认</el-button>
				</div>
			</div>
		</el-dialog>

		<el-dialog :fullscreen="false" width="80%" top="50px" :visible.sync="dialogVisible" v-if="list.length">
			<el-card class="box-card">
				<div slot="header" class="clearfix"><span>订单详情</span></div>
				<div class="item-list">
					<div class="item-col">
						<div class="item-list-title">订单号：</div>
						<div class="item-list-value">{{ setItem.id }}</div>
					</div>
					<div class="item-col">
						<div class="item-list-title">充电状态：</div>
						<div class="item-list-value">
							{{ setItem.charging_state == 0 ? '未充电' : setItem.charging_state == 1 ? '充电中' :
								setItem.charging_state == 2 ? '订单完成' : setItem.charging_state == 3 ? '充电失败' : '未知' }}
						</div>
					</div>
					<div class="item-col">
						<div class="item-list-title">手机号：</div>
						<div class="item-list-value">{{ setItem.phone }}</div>
					</div>
					<div class="item-col">
						<div class="item-list-title">端口号：</div>
						<div class="item-list-value">{{ setItem.port }}</div>
					</div>
					<!-- <div class="item-col">
						<div class="item-list-title">用户昵称：</div>
						<div class="item-list-value">{{ setItem.nickname }}</div>
					</div> -->
					<div class="item-col">
						<div class="item-list-title">站点名称：</div>
						<div class="item-list-value">{{ setItem.site_name }}</div>
					</div>
					<div class="item-col">
						<div class="item-list-title">设备编号：</div>
						<div class="item-list-value">{{ setItem.device_id }}</div>
					</div>
					<div class="item-col">
						<div class="item-list-title">站点地址：</div>
						<div class="item-list-value">{{ setItem.site_address }}</div>
					</div>
					<div class="item-col">
						<div class="item-list-title">预计时长：</div>
						<div class="item-list-value">{{ setItem.expect_charging_time }}分钟</div>
					</div>
					<div class="item-col">
						<div class="item-list-title">实际时长：</div>
						<div class="item-list-value">{{ setItem.charging_time }}分钟</div>
					</div>
					<div class="item-col">
						<div class="item-list-title">开始时间：</div>
						<div class="item-list-value">{{ setItem.start_time }}</div>
					</div>
					<div class="item-col">
						<div class="item-list-title">支付金额：</div>
						<div class="item-list-value">{{ (setItem.total_fee / 100).toFixed(2) }}元</div>
					</div>
					<div class="item-col">
						<div class="item-list-title">结束时间：</div>
						<div class="item-list-value">{{ setItem.end_time }}</div>
					</div>
					<div class="item-col">
						<div class="item-list-title">退款金额：</div>
						<div class="item-list-value">{{ setItem.refund_amount || 0 }}元</div>
					</div>
					<div class="item-col">
						<div class="item-list-title">订单状态：</div>
						<div class="item-list-value">
							<el-tag v-if="setItem.pay_state == 1" type="info">未支付</el-tag>
							<el-tag v-else-if="setItem.pay_state == 2" type="success">已支付</el-tag>
							<el-tag v-else-if="setItem.pay_state == 3" type="warning">已退款</el-tag>
							<el-tag v-else-if="setItem.pay_state == 4" type="danger">取消通电</el-tag>
							<el-tag v-else-if="setItem.pay_state == 5" type="danger">待退款</el-tag>
						</div>
					</div>
					<div class="item-col">
						<div class="item-list-title">充电消费：</div>
						<div class="item-list-value">
							{{ (setItem.charging_money - (setItem.refund_amount || 0)).toFixed(2) }}元
						</div>
					</div>
					<div class="item-col">
						<div class="item-list-title">支付时间：</div>
						<div class="item-list-value">{{ setItem.pay_time }}</div>
					</div>
					<div class="item-col">
						<div class="item-list-title">结算功率：</div>
						<div class="item-list-value">{{ setItem.settlement_power || 0 }}W</div>
					</div>
					<!-- <div class="item-col">
						<div class="item-list-title">备注：</div>
						<div class="item-list-value">{{ setItem.remark }}</div>
					</div> -->
				</div>
			</el-card>
			<el-card class="box-card" style="margin-top: 20px;position: relative;">
				<div slot="header" class="clearfix"><span>功率图表</span></div>
				<div style="margin-right: 20px;">
					<line-chart :chart-data="powers" />
				</div>
				<div class="item-f">分钟</div>
				<div class="gl-f">功率(w)</div>
			</el-card>
		</el-dialog>
	</div>
</template>

<script>
import LineChart from './components/LineChart'
import { query, detail, voluntaryRefund, OrderChargingPower } from '@/api/order';
import { getSite } from '@/api/pile-point-admin';

export default {
	name: 'order',
	components: {
		LineChart
	},
	data() {
		return {
			pageSize: 10, // 每页条数
			pageCount: 7, //
			pageSizes: [10, 20, 30, 40, 50, 100], // 个数选择器
			currentPage: 1, // 当前页码
			total: 0, // 总条数
			list: [],
			dialogVisible: false,
			dialogVisible2: false,
			setItem: {},
			itemForm: {},
			refund_reason: '',
			form: {
				order_id: '',
				site_id: '',
				device_id: '',
				charging_state: '',
				user_tel: '',
				recharge_start_end: '',
				pay_start_end: '',
			},
			//订单状态
			stateList: [{
				value: '0',
				label: '未充电'
			}, {
				value: '1',
				label: '充电中'
			}, {
				value: '2',
				label: '订单完成'
			}, {
				value: '3',
				label: '通电失败'
			}],
			sites: [],
			powers: {}
		};
	},
	created() {
		this.getSite();
		this.getData();
	},
	methods: {

		// 申请退款
		toRefund() {
			if (!this.refund_reason) {
				this.$message.error('请输入退款原因');
				return
			}
			voluntaryRefund({
				order_id: this.itemForm.id,
				refund_reason: this.refund_reason
			}).then(res => {
				if (res.state) {
					this.$message.success('申请退款成功');
					this.refund_reason = '';
					this.dialogVisible2 = false;
					this.getData();
				} else {
					this.$message.error(res.msg);
				}
			});
		},

		// 获取站点
		getSite() {
			getSite({ type: 1 }, false).then(res => {
				if (res.state) {
					this.sites = res.data.sitelist
				} else {
					this.$message.error(res.msg);
				}
			});
		},

		// 每页显示的条数
		handleSizeChange(val) {
			this.pageSize = val;
			this.getData(1, val);
			// 注意：在改变每页显示的条数时，要将页码显示到第一页
			this.currentPage = 1;
		},

		// 显示第几页
		handleCurrentChange(val) {
			this.currentPage = val;
			// 切换页码时，要获取每页显示的条数
			this.getData(val, this.pageSize);
		},
		sousuo(e) {
			this.currentPage = 1;
			this.getData();
		},

		// 获取数据
		getData() {
			let data = {
				pageNumber: this.currentPage,
				pageSize: this.pageSize,
				order_id: this.form.order_id,
				site_id: this.form.site_id,
				device_id: this.form.device_id,
				charging_state: this.form.charging_state,
				user_tel: this.form.user_tel
			}

			if (this.form.recharge_start_end) {
				data['recharge_start_end'] = this.form.recharge_start_end.join(' - ')
			}
			if (this.form.pay_start_end) {
				data['pay_start_end'] = this.form.pay_start_end.join(' - ')
			}

			query(data).then(res => {
				if (res.state) {
					this.total = res.data.totalRow;
					this.list = res.data.list;
				} else {
					this.$message.error(res.msg);
				}
			});
		},

		// 查看详情
		getOrderInfo(id) {
			detail({
				order_id: id
			}).then(res => {
				this.dialogVisible = true;
				this.setItem = res.data;
				OrderChargingPower({
					order_id: id
				},false).then(res => {
					this.powers = res.data.map;
				});
			});
		}

	}
};
</script>
<style lang="scss" scoped>
.item-f {
	position: absolute;
	bottom: 55px;
	right: 10px;
}

.gl-f {
	position: absolute;
	top: 65px;
	left: 27px;
}

.item-list {
	display: flex;
	flex-wrap: wrap;

	.item-col {
		width: 50%;
		display: flex;
		align-items: center;
		margin: 15px 0;

		.item-list-title {
			width: 120px;
			display: flex;
			justify-content: flex-end;
			font-weight: 600;
		}

		.item-list-value {
			flex: 1;
			color: #999;
		}
	}
}
</style>
